<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <div style="float: right;">
          <el-button size="small" type="primary" @click="showAdd">添加</el-button>
          <el-button size="small" type="success" @click="showAddWrite">编辑</el-button>
          <el-button size="small" type="danger" @click="del">删除</el-button>
        </div>
      </div>
      <el-dialog
        title="任务/指标管理"
        :visible.sync="showAddFormdialog"
        width="450px"
        @close="cancelForm('taskRef')"
      >
        <el-form
          ref="taskRef"
          :model="taskForm"
          :rules="taskrules"
          label-width="100px"
          :hide-required-asterisk="false"
        >
          <!-- <el-form-item label="上级权限：">
            <el-select class="userIntSize" disabled v-model="taskForm.id" clearable placeholder='任务操作'>
              <el-option
                v-for="(item,index) in superPerOption"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="年份" prop="year">
            <el-date-picker
              value-format="yyyy"
              v-model="taskForm.year"
              type="year"
              placeholder="选择年"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="任务/指标" prop="name">
            <el-input type="textarea" v-model="taskForm.name" style="width:300px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="指标" prop="name">
            <el-input type="textarea" v-model="taskForm.name" style="width:300px"></el-input>
          </el-form-item>-->
        </el-form>
        <span slot="footer">
          <el-button type="primary" @click="submitForm('taskRef')">确认</el-button>
        </span>
      </el-dialog>
      <el-table
        :header-cell-style="{background:'#f5f5f5'}"
         height="680px"
        border
        :highlight-current-row="currentRow"
        @row-click="rowColor"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        :tree-props="{children: 'tasks', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="任务"></el-table-column>
      </el-table>
      <el-pagination
        background
        style="float:right"
        layout="prev, pager, next"
        :page-size="pagesize"
        :current-page="currentPage"
        :total="total"
        @current-change="pageChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      taskForm: {
        id: "",
        update: false,
        name: "",
        year: "",
        level: "",
        parentId: null,
      },
      taskrules: {
        name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        year: [{ required: true, message: "内容不能为空", trigger: "change" }],
      },
      showAddFormdialog: false,
      showAddIndexdialog: false,
      options: [],
      currentRow: false,
      rowData: {},
      superPerOption: [],
      pagesize: 10,
      currentPage: 1,
      total: 0,
    };
  },
  methods: {
    getData() {
      let obj = {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
      };
      this.$axios
        .post("task/getAllTask", obj, 2)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.readNodes(this.tableData, this.superPerOption);
            console.log(this.tableData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    readNodes(nodes = [], arr = []) {
      for (let item of nodes) {
        let obj = {};
        obj["id"] = item.id;
        obj["name"] = item.name;
        arr.push(obj);
        if (item.childrens && item.childrens.length)
          this.readNodes(item.childrens, arr);
      }
      return arr;
    },
    rowColor(row) {
      console.log(row);
      this.currentRow = true;
      this.rowData = row;
    },
    // 确认按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            name: this.taskForm.name,
          };
          // 修改
          if (this.taskForm.update) {
            console.log(111);
            obj.id = this.taskForm.id; //1任务 2指标
            obj.level = this.rowData.level; //1任务 2指标
            obj.parentId = this.taskForm.parentId; //null任务 任务的id指标
            obj.year = this.taskForm.year;
            // obj.allocat = 0
            this.updataTask(obj);
          } else {
            //添加
            console.log(this.taskForm.id);
            obj.level = this.taskForm.level; //1任务 2指标
            obj.parentId = this.taskForm.id; //null任务 任务的id指标
            obj.year = this.taskForm.year;
            // obj.allocat = 0
            this.addTask(obj);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加
    showAdd() {
      this.showAddFormdialog = true;
      this.taskForm.update = false;
      if (this.currentRow) {
        if (this.rowData.tasks != null) {
          // 添加指标
          this.taskForm.level = 2;
          this.taskForm.id = this.rowData.id;
        } else {
          this.showAddFormdialog = false;
          this.$message({
            message: "指标下不能添加内容!",
            type: "warning",
          });
        }
      } else {
        // 添加任务
        this.taskForm.level = 1;
      }
    },
    // 修改
    showAddWrite(data) {
      if (this.currentRow) {
        this.taskForm.id = this.rowData.id;
        this.taskForm.parentId = this.rowData.parentId;
        this.taskForm.year = this.rowData.year;
        this.taskForm.name = this.rowData.name;
        this.taskForm.update = true;
        this.showAddFormdialog = true;
      } else {
        this.$message({
          message: "请先选择要操作的任务或指标！",
          type: "warning",
        });
      }
    },
    // 关闭弹窗
    cancelForm(formName) {
      this.taskForm = {
        id: "",
        name: "",
        update: false,
        year: "",
        level: "",
        parentId: "",
      };
      this.$refs[formName].resetFields();
      this.currentRow = false;
    },
    // 添加
    addTask(data) {
      if (data.level == 1) {
        this.$axios
          .post("task/addAllTask1", data)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.showAddFormdialog = false;
              this.getData();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$axios
          .post("task/addAllTask2", data)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.showAddFormdialog = false;
              this.getData();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 修改
    updataTask(data) {
      // if(data.level == 1){ // 修改任务
      this.$axios
        .post("task/updateTask", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.showAddFormdialog = false;
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除
    del() {
      if (this.currentRow) {
        this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .post("task/deleteTask", { id: this.rowData.id }, 2)
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success("删除成功");
                  this.currentRow = false;
                  this.getData();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((e) => e);
      } else {
        this.$message({
          message: "请先选择要操作的权限！",
          type: "warning",
        });
      }
    },
    showAddIndex() {
      this.showAddIndexdialog = true;
    },
    changeSelsct() {},
    pageChange(page) {
      this.currentPage = page;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.el-form-item__label {
  text-align: center !important;
}
</style>
<style>
.current-row > td {
  background: rgba(0, 158, 250, 0.219) !important;
}
</style>
